<template>
	<view>
	<view class="item" >
		<view class="image"><img :src="dataList.cover|coverPic" alt="" ></view>
		<view class="carInfo">
			<view class="carname">{{dataList.title}} </view>
			<view class="carDetail">
				<span>{{new Date(dataList.brandDate).getFullYear()}}年上牌 . {{dataList.mileage}}万公里.{{dataList.brand.paifang}}</span>										  
			</view>
			<view class="price">
				<view class="amount">{{dataList.onlinePrice}}</view>
				<view class="updatetime" v-if="dataList.updateTime">{{dataList.updateTime|filterTime}}更新</view>
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	export default {
		props:['dataList'],
		data() {
			return {
				
			};
		},
		filters:{
			coverPic(path) {
			  try {
			    const _tem = path.split("/");
			    _tem.splice(-1, 0, "m");
			    return _tem.join("/");
			  } catch (e) {}
			},
		
			  filterTime:value=>{
			    if(value){
			      const date = new Date(value)
			      const y = date.getFullYear()
			      const m = date.getMonth()+1
			      const d = date.getDay()
			      return `${y}-${m}-${d}`
			    }
			},
		}
	}
</script>

<style lang="scss">
  .item{
		  		padding: 20rpx ;  
				margin: 0 33rpx 16rpx;
				display: flex;
				flex-grow: 1;
				flex-direction: row;
				box-shadow: 0px 0.533vw 2.667vw 0px rgba(0, 0, 0, 0.08);
				border-radius: 12rpx;
				align-items: center;
				.image{
					width:274rpx;
					height: 182rpx;
					img{
						width: 100%;
						height: 100%;
					}
				}
				.carInfo{
					padding-left: 20rpx;
					width: 350rpx;
					.carname{
						font-size: 32rpx;
						font-weight: bold;
						overflow: hidden;
						text-overflow: ellipsis;
						line-clamp: 2;
					}
					.carDetail{
						color: #999;
						font-size: 20rpx;
				}
				.price{
					margin-top: 10rpx;
					display: flex;
					flex-direction: column;
					align-items: flex-end;
					.amount{
						color: #D52002;
						font-size: 40rpx;
						font-weight: 500;
						
					}
					.amount::before{
					  content: '￥ ';
					  display: inline-block;
					  font-size: 24rpx;
					}
					.amount::after{
					  content: ' 万';
					  display: inline-block;
					  font-size: 24rpx;
					}
					.updatetime{
						font-size: 12rpx;
						color: #999;
						margin-left: 10rpx;
					}
				}
		  }
		  }
</style>
